<template>
	<div class="imgDetail">
		<div class="box">
			<el-tooltip class="item" effect="dark" content="单击图片在新窗口打开图片" placement="top">
				<img :src="drawerData.url" alt="" @click='openNewWindow'>
			</el-tooltip>
		</div>
		<el-divider><i class="el-icon-document"></i></el-divider>
		<div class="imgInfo">
			<div class="userInfo">
				<img :src="drawerData.avator" alt="" class='userAvator'>{{drawerData.name}}
			</div>	  	
			<el-tabs type="border-card" v-model='activeName'>
				<el-tab-pane label="关于图片" name='aboutImg'>
					<p>上传于 {{drawerData.create_time}}</p>
				</el-tab-pane>
				<el-tab-pane label="图片代码" name='codeImg'>
					<input id="copyCon" type="text" style="position: absolute;opacity: 0;z-index:-1;"/>
					<el-form :label-position="labelPosition" label-width='120px'>
						<el-form-item v-for='item in list' :label='item.prop=="divider"?"":item.label' :class='item.prop=="divider"?"margin0":""' :key='item'>
							<el-divider content-position="left" v-if='item.prop=="divider"'>{{item.label}}</el-divider>
							<p @click='copy($event)' v-else>{{drawerData.url | imgCode(item.label,item.name)}}</p>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
	export default{
		name:'imgDetail',
		props:['drawerData'],
		data(){
			return{
				activeName:'aboutImg',
				labelPosition: 'right',
				list:[
					{
						label:'图片URL',
						prop:'divider'
					},
					{
						label:'原图链接',
					},
					{
						label:'图片嵌入代码',
						prop:'divider'
					},
					{
						label:'HTML',
						name:'code'
					},
					{
						label:'BBCode',
						name:'code'
					},
					{
						label:'Markdown',
						name:'code'
					},
					{
						label:'图片链接 + 图片嵌入代码',
						prop:'divider'
					},
					{
						label:'HTML',
					},
					{
						label:'BBCode'
					},
					{
						label:'Markdown'
					}
				]
			}
		},
		filters:{
			// img(imgUrl,type){
			// 	if(type==='middle') return imgUrl.replace('large',"middle");
			// 	else return imgUrl.replace('large',"thumbnail");  
			// },
			imgCode(imgUrl,type,name){
				let str=imgUrl;
				if(type==='HTML') str=name=='code'?`<img src="${imgUrl}">`:`<a href="${imgUrl}"><img src="${imgUrl}"></a>`;
				else if(type==='BBCode') str=name=='code'?`[img]${imgUrl}[/img]`:`[url="${imgUrl}"][img]${imgUrl}[/img][/url]`;
				else if(type=='Markdown') str=name=='code'? `![](${imgUrl})`:`[![](${imgUrl})]("${imgUrl}")`;
				return str;
			}
		},
		methods:{
			openNewWindow(){
				open(this.drawerData.url);
			},
			copy(This){
				let text=This.target.innerText;
				copyCon.value=text;
				copyCon.select();
				document.execCommand("Copy");
				this.info('复制成功~~~');
			}
		}
	}
</script>
<style scoped lang='stylus'>
.imgDetail{
	.box{
		height: 500px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 2em;
		background: #eee;
		padding: .8em;
		>img{
			max-width: 100%;
		    max-height: 100%;
		    cursor: pointer;
		}
	}
	.el-divider--horizontal{
		margin: 2.5em auto;
		width: 96%;
		.el-divider__text{
			i{
				font-size: 20px;
			}
		}
	}
	.el-divider__text{
		&.is-left{
    		left: 88px;
		}
	}
	.imgInfo{
		margin-bottom: 3em;
		.userInfo{
			display: flex;
			align-items: center;
			margin:1em 1.6em;
			font-size: 20px;
			img{
				width: 80px;
				border-radius: 50%;
				height: 80px;
				margin-right: 1em;
				cursor: pointer;
				border: 1px solid #ddd;
			}
		}
		.el-tabs{
			margin:0 2em;
			.el-tab-pane{
				margin:1em;
			}
		}
		.el-form-item{
			&.margin0{
				>>>.el-form-item__content{
					margin-left:10px !important;
				}
			}
			>>>.el-form-item__content{
				p{
					padding: 0 15px;
				    border-radius: 5px;
				    color: #6c6c6c;
				    word-break: break-all;
				    border: 1px solid #DCDFE6;
				    cursor:pointer;
				}
			}
		}
	}
}





</style>